<section ng-init="loadParams()" class="card">
    <div class="card-body">

        <div ng-if="folderType">
            <div class="row mb-3">
                <div class="col-12">
                    <filter-list request="request" callback="getList(pageIndex)"></filter-list>
                </div>
            </div>

            <div class="row">
                <div class="col-6 text-left">
                    <a href="/portal/template/list/{{themeId}}" class="btn btn-sm btn-primary px-3">
                        <i class="fas fa-reply"></i> Back
                    </a>
                </div>
                <div class="col-6 text-right">
                    <a href="/portal/template/create/{{themeId}}/{{folderType}}" class="btn btn-sm btn-primary px-3">
                        <i class="fas fa-plus"></i> Add
                    </a>
                </div>
            </div>

            <hr>
        </div>
        <!-- 
    <div class="card-header">
        <div class="row" ng-if="folderType">
            <div class="col-md-8">
                <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
                    <div class="btn-group mr-2">
                        <a href="/portal/template/create/{{themeId}}/{{folderType}}" class="btn btn-secondary">
                            <i class="fas fa-plus"></i>
                        </a>
                    </div>
                    <div class="btn-group mr-2">
                        <a href="/portal/template/list/{{themeId}}" class="btn btn-secondary">
                            <i class="fas fa-reply"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
            </div>
            <filter-list request="request" callback="getList(pageIndex)"></filter-list>
        </div>
    </div> -->
        <div class="row">
            <div class="col-12">
                <table class="table table-sm table-hover" cellspacing="0">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col">
                                Template Name
                            </th>
                            <th scope="col">
                                Folder path
                            </th>
                            <th scope="col" width="20%">
                                Created Date
                            </th>
                            <th scope="col" width="5%">
                                Actions
                            </th>
                        </tr>
                    </thead>

                    <tbody class="sortable" ng-init="getList()">
                        <tr ng-if="!folderType" ng-repeat="d in folderTypes track by $index">
                            <td class="text-primary">
                                <span class="fas fa-folder mr-2"></span>
                                <a ng-click="loadFolder(d)" class="btn btn-sm text-primary" ng-bind="d"></a>
                            </td>
                            <td colspan="3"></td>
                        </tr>
                        <tr ng-if="folderType" ng-repeat="item in data.items track by $index" class="sortable-item"
                            sort-model="template" sort-model-id="{{item.id}}">
                            <td>
                                <small ng-bind="item.fileName"></small>
                            </td>
                            <td>
                                <div class="input-group input-group-sm">
                                    <input id="path-modal-{{$index}}" value="{{item.fileFolder}}"
                                        onclick="this.select()" class="form-control form-control-sm"
                                        readonly="readonly">
                                </div>
                            </td>
                            <td>
                                <small ng-bind="item.createdDateTime | utcToLocal" class="text-black-50"></small>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm btn-group-sm float-right" role="group"
                                    aria-label="Actions">
                                    <a href="/portal/template/details/{{themeId}}/{{folderType}}/{{item.id}}"
                                        class="btn btn-link">
                                        <span class="fas fa-pen text-primary"></span>
                                    </a>
                                    <a ng-click="remove(item.id);" class="btn btn-link">
                                        <span class="fas fa-trash-alt text-danger"></span>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="card-footer">

        <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
            ul-class="pagination justify-content-end m-0" a-class="page-link" paging-action="getList(page-1)"
            scroll-top="true"></paging>
    </div>
</section>